const arr = [
  `1. 可以说出什么是webapi ？（） <br>
  A. webapi 是 一套 操作网页内容(DOM) 的 对象<br>
  B. webapi 是 一套 操作网页内容(DOM) 的 函数<br>
  C. webapi 是一套 操作网页内容(DOM) 与 浏览器窗口(BOM) 的对象<br>
  D.webapi 是一套 操作网页内容(DOM) 与 浏览器窗口(BOM) 的函数<br>
  `,
  `2.以下属于JS三个组成部分的是（） 【多选题】<br>
A. ECMAScript<br>
B. DOM<br>
C. BOM<br>
D. document<br>
E. object`,
  `3.如果我想获取第一个类名为box的元素，该使用哪一个方法？（）<br>
A. document.querySelector('box')<br>
B. document.querySelectorAll('box')<br>
C. document.querySelector('.box')<br>
D. document.querySelectorAll('.box')`,
  `4.如果我想获取所有类名为box的元素，该使用哪一个方法？（）<br>
A. document.querySelector('box')<br>
B. document.querySelectorAll('box')<br>
C. document.querySelector('.box')<br>
D. document.querySelectorAll('.box')`,
  `
5.假设页面有两个类名为box的元素，以下哪一个语法会报错？（） 【多选题】<br>
A. document.querySelector('box').style.backgroundColor ='red'<br>
B. document.querySelector('.box').style.backgroundColor = 'red'<br>
C.document.querySelectorAll('.box').style.backgroundColor = 'red'<br>
D. document.querySelectorAll('.box')[0].style.backgroundColor = 'red'`,
  `6.关于innerText与innerHTML的区别，下列说法错误的是? （）<br>
A. innerText只能获取元素文本，无法获取标签<br>
B. innerHTML可以获取文本 + 标签<br>
C. innerText在获取文本的时候，包含子元素的文本<br>
D. innerText与innerHTML在设置的时候，作用一致。都可以解析文本中的标签样式`,
  `7.关于元素HTML常用属性操作，下列说法错误的是? （）<br>
A. 元素HTML属性指的是HTML标签本身的属性，比如 title ， alt等等<br>
B. 修改img标签的图片语法是: 元素.src = '图片路径'<br>
C. 修改a标签的链接语法是: 元素.href = '链接'<br>
D. 获取元素的类名语法是： 元素.class`,
  `8.关于元素css属性操作，下列说法错误的是？（）<br>
A. 我们可以通过style属性来修改常见样式<br>
B. 我们可以通过类名来修改常见样式，格式是： 元素.class<br>
C. 我们可以使用classList 来增加删除类名， 比如 add()等等<br>
D. classList的优点是可以不影响原先类名`,
  `9.下列设置元素css样式语法，哪些是错误的? （） 【多选题】<br>
A. 元素.style.backgroundColor = 'red'<br>
B. 元素.style.backgroundColor = 'rgb(255,0,0)'<br>
C. 元素.style.background-color = 'red'<br>
D. 元素.style.width = 100<br>
E. 元素.style.width = '100px'<br>
F. 元素.style.src = '路径'`,
  `10.关于classList语法，下列说法正确的是（） 【多选题】<br>
A. classList的作用是操作元素的类名，包含新增、移除、切换类名等操作<br>
B. 新增类名： 元素.classList.add('类名')<br>
C. 移除类名： 元素.classList.remove('类名')<br>
D. 切换类名： 元素.classList.toggle('类名')<br>
E. classList 相比较 className的优点是可以不影响原先类名，一般是不覆盖原有类名`,
  `11.关于表单属性语法，下列说法正确的是（） 【多选题】<br>
A. 元素.innerText 属性也可以用于获取表单输入框的文本<br>
B. 输入框的文本必须要使用 元素.value<br>
C. 设置表单禁用状态的语法是： 元素.style.disabled= true<br>
D. 设置表单选中状态的语法是： 元素.checkd = true<br>
E. 设置表单选中状态的语法是： 元素.checked = true`,
  `12.关于自定义属性说法错误的是？（）<br>
A. 在html5中推出来了专门的data-自定义属性<br>
B. 在标签上一律以data-开头， 比如 data-id=“10”<br>
C. 在DOM对象上一律以dataset对象方式获取<br>
D. 自定义属性以后使用较少`,
  `13. 关于间歇函数说法正确的是?（） 【多选题】<br>
A. 间歇函数返回的值是数字型，而且间歇函数可以停止和开启，我们应该使用 let 声明<br>
B. 语法: setInterval(间歇函数, 间隔时间)，其中间隔时间的单位是 ms 毫秒<br>
C. 间歇函数可以根据时间自动重复执行某些代码<br>
D. 停止间歇函数的语法: clearInterval(间歇函数, 间隔时间)`,
  `1. 关于js中的事件，下列说法错误的是？（）<br>
A： 元素不能注册同名事件,比如给同一个按钮同时注册2个点击事件<br>
B： 事件注册之后，比如点击，鼠标经过等事件，不会立即触发<br>
C： 页面中DOM元素是都可以注册事件的<br>
D： 事件既可以通过用户交互来触发，也可以使用代码主动触发,比如 btn.click()`,
  `2.下列关于事件类型解释正确的是? （） 【多选题】<br>
A. 鼠标事件类型：click 鼠标点击 mouseenter 鼠标经过 mouseleave 鼠标离开<br>
B. 表单获得光标事件类型：focus 获得焦点 blur 失去焦点<br>
C. 键盘事件类型： Keydown 键盘弹起触发 Keyup 键盘按下触发<br>
D. 用户输入表单事件类型： input 用户输入时触发`,
  `3.关于事件对象解释错误的是？（）<br>
A. 事件对象也是个对象，这个对象里有事件触发时的相关信息<br>
B. 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息<br>
C. 在事件绑定的回调函数的第一个参数就是事件对象，一般命名为 event、ev或者e<br>
D. 鼠标触发的事件包含事件对象，其余的比如键盘事件是没有事件对象的`,
  `4.关于环境对象this，下列说法错误的是? （）<br>
A. this是js中的一个环境对象，一般用于函数中<br>
B. 在事件处理函数中，this指向事件源dom对象，简单说指向函数调用者<br>
C. 只要是事件处理函数，就必须要使用this，否则无法实现功能<br>
D. this相当于中文的我， 谁调用，我就是谁`,
  `5.关于回调函数说法正确的是? （） 【多选题】<br>
A. 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数<br>
B. 以前我们学过的 间歇函数(定时器)里面的函数，还有事件监听的匿名函数都是回调函数<br>
C. 使用匿名函数做为回调函数比较常见<br>
D. 回调函数简单理解，就是执行完某个命令之后，回头调用的函数，简称回调函数`,
  `6.事件源一般是以什么形式存在的?（）<br>
A： 字符串<br>
B： DOM对象<br>
C： 伪数组<br>
D： 数组`,
  `7. 通过以下哪个属性可以获取到键盘事件点击的键盘码（）<br>
A： event.keyboard<br>
B： event.keyboardNumber<br>
C： event.key<br>
D： 以上属性都行`,
  `
*8.以下注册事件的说法，正确的是（）<br>
A： 可以使用on+事件名称给一元素的同一个事件注册多个事件处理函数<br>
B： addEventListener方法可以给一个元素注册多个相同事件，并且都能执行<br>
C： addEventListener第一个参数是事件名，注意需要加"on"<br>
D： addEventListener方法没有兼容性问题`,
  `1.以下关于事件对象，说法错误的是：（）<br>
A. 事件对象在事件监听回调函数的第一个参数<br>
B. 事件对象一般用于获取鼠标坐标信息与键盘按键信息<br>
C. 事件对象不可以自己命名，必须严格遵循规则来写，比如 必须是event<br>
D. 事件对象不仅有属性，还有方法`,
  `2. 以下关于事件委托，说法错误的是? （）<br>
A. 事件委托指的是 给父元素注册事件，委托给子元素来处理<br>
B. 事件委托一般用于解决 ： 给动态新增的元素注册事件<br>
C. 事件委托可以减少页面注册事件的次数,事件委托其实是利用事件冒泡的特点<br>
D. 事件委托中的this与e.target指向同一个对象，它们可以随意互换`,
  `3. 以下关于事件流，说法错误的是? （）<br>
A. 事件流三个阶段是：事件捕获、事件目标、事件冒泡<br>
B. 默认情况下，我们一般注册的事件都是冒泡事件<br>
C. addEventListener 可以捕获和冒泡，而 btn.onclick= funciton(){} 只有冒泡<br>
D. 事件流是浏览器默认现象，我们无法阻止`,
  `4.关于js中的事件冒泡与事件捕获，下列说法正确的是？（）<br>
A： 捕获类型事件，只能使用addEventListener注册，传统注册方法只能是事件冒泡<br>
B： 事件对象的stopPropagation方法只能阻止冒泡，不能阻止捕获<br>
C： 事件冒泡是浏览器的默认行为，我们无法阻止<br>
D： 如果想要阻止事件的冒泡行为，可以使用事件对象的preventDefault()方法`,
  `5.在 JavaScript 中，用于阻止默认事件的默认操作的方法是? （）<br>
A： stopDeafault()<br>
B： stopPropagation()<br>
C： preventPropagation()<br>
D： preventDefault()`,
  `6.在 JavaScript 中，用于阻止事件冒泡的操作的方法是? （）<br>
A： stopDeafault()<br>
B： stopPropagation()<br>
C： preventPropagation()<br>
D： preventDefault()`,
  `7.事件委托中，可以获得真正触发事件的元素的是? （）<br>
A： 事件对象.target. tagName<br>
B： target. tagName<br>
C： 事件对象.target. name<br>
D： 事件对象.tagName`,
  `8.下面关于尺寸说法正确的是？ （） 【多选题】<br>
A：scrollLeft和scrollTop 是获取被卷去的左侧和头部， 是可读写的<br>
B： window.scrollTo() 方法可把内容滚动到指定的坐标<br>
C： clientWidth和clientHeight 获取元素的可见部分宽高(不包含边框，滚动条等)<br>
D： offsetWidth和offsetHeight 获取元素的自身宽高、包含元素自身设置的宽高、padding、border ，是只读的`,
  `9.下面是页面加载事件的是?（）<br>
A： scroll<br>
B： load<br>
C： resize<br>
D： target`,
  `10.下面是页面滚动事件的是?（）<br>
A： scroll<br>
B： load<br>
C： resize<br>
D： target`,
  `11.下面是页面尺寸发生变化触发的事件是?（）<br>
A： scroll<br>
B： load<br>
C： resize<br>
D： target`,
  `1.以下关于查询节点语法，错误的是：（）<br>
A. 元素.parentNode 是获取父元素<br>
B. 元素.previousElementSibling 是获取上一个元素<br>
C. 元素.nextElementSibling 是获取下一个元素<br>
D. 元素.childNodes 是获取所有子元素`,
  `2.以下关于新增节点，错误的是：（）<br>
A. document.createElement() 创建的是空标签<br>
B. 元素.appendChild(子元素) 会将子元素添加到最后面<br>
C. 元素.insertBefore(A元素,B元素) 是将A元素新增到B元素前面<br>
D. document.createElement() 会将元素添加到DOM树并渲染`,
  `3.以下关于节点操作，错误的是? （） 【多选题】<br>
A. 父元素.removeChild(子元素) 作用是删除子元素<br>
B. 元素.innerHTML = '' 可以实现清空该元素的所有内容<br>
C. 父元素.removeChild(子元素) 也可以删除其他元素的子元素<br>
D. 元素.cloneNode() 不仅会复制自己,也会复制自己所有的后代元素`,
  `4. 在JavaScript，可以使用Date对象的哪个方法返回一个月中的某一天（）<br>
A. getDate()<br>
B. getYear()<br>
C. getMonth()<br>
D.getTime()`,
  `5.关于获得时间戳的方法下列那些正确的? （） 【多选题】<br>
A. new Date().getTime()<br>
B. +new Date()<br>
C. Date.now()<br>
D.getTime()`,
  `6. 关于重绘和回流说法正确的是? （） 【多选题】<br>
A. 由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时, 则是重绘<br>
B. 元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流<br>
C. 重绘不一定引起回流，而回流一定会引起重绘<br>
D.简单理解影响到布局了，就会有回流`,
  `7. 关于时间戳的说明说法正确的是? （） 【多选题】<br>
A. 比如计算倒计时效果，时间不方便直接进行相减，需要借助于时间戳完成<br>
B. 时间戳是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式<br>
C. 倒计时的算法是： 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数 ，之后转换为时分秒<br>
D. 时间戳需要借助于日期对象`,
  `1. 关于定时器，下列说法错误的是?（）<br>
A. 延时函数 setTimeout() 只会执行一次<br>
B. 间歇函数 setInterval() 会重复执行，必须要手动清除<br>
C. 无论是哪一种定时器，只要开启就会立即执行<br>
D. clearInterval() 清除定时器必须要传参，参数是定时器的id`,
  `2.关于window对象描述，错误的是?（）<br>
A. window对象的成员，使用时可以省略window<br>
B. window.document === document ,结果是true<br>
C. window.a = 10 , 这行代码相当于添加了一个全局变量a<br>
D. window 里面 load 事件，会在DOM树加载完成后执行`,
  `3.关于bom对象，下列说法错误的是?（）<br>
A. location.href = ‘url’ 可以实现页面跳转功能<br>
B. location.search 获取地址中携带的参数，符号 ？后面部分<br>
C. location.hash 属性获取地址中的哈希值，符号 # 后面部分<br>
D. history.go(1) 和 history.back() 功能一致`,
  `4. 关于localStorage与sessionStorage，下列说法错误的是? （）<br>
A. 可以存储任意类型的数据<br>
B. 他们的作用相同，但是存储方式不同，因此应用场景也不同<br>
C. localStorage 的数据可以长期保留,关闭浏览器也不会消失<br>
D. sessionStorage是临时存储，页面被关闭时，存储在 sessionStorage 的数据会被清除`,
  `5. localStorage 存储语法是什么？ （）<br>
A. localStorage.setItem(key,value)<br>
B. localStorage.getItem(key)<br>
C. localStorage.removeItem(key)<br>
D. localStorage.addItem(key)`,
  `6.localStorage 获取语法是什么？ （）<br>
A. localStorage.setItem(key,value)<br>
B. localStorage.getItem(key)<br>
C. localStorage.removeItem(key)<br>
D. localStorage.addItem(key)`,
  `7. localStorage 删除语法是什么？ （）<br>
A. localStorage.setItem(key,value)<br>
B. localStorage.getItem(key)<br>
C. localStorage.removeItem(key)<br>
D. localStorage.addItem(key)`,
  `8. localStorage 只能存储什么类型的数据？（）<br>
A. 任意类型<br>
B. 字符串<br>
C. 复杂数据类型<br>
D. 对象`,
  `9.localStorage 存储复杂数据类型应该先转换为什么类型存储？（）<br>
A. 字符串<br>
B. 任意类型<br>
C. 复杂数据类型<br>
D. 对象`,
  `10. localStorage 存储的时候使用那个方法可以存储为JSON字符串？（）<br>
A. JSON.stringify(复杂数据类型)<br>
B. JSON.parse(复杂数据类型)<br>
C. '复杂数据类型'<br>
D. 数组.join('')`,
  `11. localStorage 直接获取的复杂数据类型得到的是什么？()<br>
A. JSON字符串<br>
B. 对象<br>
C. 数组<br>
D. 任意类型`,
  `12. localStorage 获取复杂数据类型如何转换为对象格式？（）<br>
A. JSON.stringify(JSON字符串)<br>
B. JSON.parse(JSON字符串)<br>
C. '复杂数据类型'<br>
D. 数组.join('')`,
  `13. 关于数组方法map说法正确的是? （） 【多选题】<br>
A. map 可以处理数据，并且返回新的数组<br>
B. map方法里面的回调函数有2个参数， 第一个参数是当前数组元素， 第二个参数是 当前数组元素的索引号<br>
C. map 是迭代数组，可以给数组元素做某些操作，并且里面写return，就可以返回处理后的数据<br>
D. map 方法 也可以遍历数组， 只不过功能更强大`,
  `14. 关于数组方法 join方法说法正确的是? （） 【多选题】<br>
A. join() 方法用于把数组中的所有元素转换一个字符串<br>
B. 比如 [1,2,3].join('') 会得到 字符串 '123'<br>
C. 数组元素是通过参数里面指定的分隔符进行分隔的<br>
D. 比如 [1,2,3].join('-') 会得到 字符串 '1-2-3'`,
  `1.下面关于正则表达式说法正确的是？（） 【多选题】<br>
A. 正则表达式是用于匹配字符串中字符组合的模式<br>
B. 可以用于表单验证(匹配)<br>
C. 可以用于过滤敏感词(替换)<br>
D. 可以用于字符串中提取我们想要的部分(提取)`,
  `2.下面声明正则表达式正确的是? （）<br>
A. const 变量名 = \表达式\<br>
B. const 变量名 = /表达式/<br>
C. const 变量名 = 表达式<br>
D. const 变量名 = '表达式'`,
  `3.下面哪个方法可以用于检测正则表达式与指定的字符串是否匹? （）<br>
A. text()<br>
B. has()<br>
C. test()<br>
D. exce()`,
  `4.下列关于正则中特殊字符描述正确的是( )? （） 【多选题】<br>
A： ^和$符号为定界符，用于表示匹配以什么开头或以什么结尾<br>
B： []表示字符类，用于匹配多个选项中的任意1个<br>
C： \d和\D是预定义字符，是一种简写字符<br>
D： *、?、+是量词符，用于表示字符出现的次数`,
  `5.关于正则表达式声明6位数字的邮编，以下代码正确的是？（）<br>
A： const reg = /\d6/<br>
B： const reg = \d{6}\<br>
C： const reg = /\d{6}/<br>
D： const reg = /d6/`,
`福利题.班里长得最帅的人是谁 ？<br>
A： <br>
B： 逍哥<br>
C： <br>
D： ,`

]
const daan = ['C', 'A,B,C', 'C', 'D', 'A,C', 'D', 'D', 'B', 'C,D,F', 'A,B,C,D,E', 'B,E', 'D', 'A,B,C',
  'A', 'A,B,D', 'D', 'C', 'A,B,C,D', 'B', 'C', 'B',
  `C`, 'D', 'D', 'A', 'D', 'B', 'A', 'A,B,C,D', 'B', 'A', 'C',
  'D', 'D', 'C,D', 'A', 'A,B,C', 'A,B,C,D', 'A,B,C,D',
  'C', 'D', 'D', 'A', 'A', 'B', 'C', 'B', 'A', 'A', 'A', 'B', 'A,B,C,D', 'A,B,C,D',
  'A,B,C,D', 'B', 'C', 'A,B,C,D', 'C','B'

]

const newArr = []
const newDaan = []
const day = document.querySelectorAll('.box button')
const btn = document.querySelectorAll('.btn button')
const title = document.querySelector('.title')
const moshi = document.querySelector('.moshi')
const moshi_btn = document.querySelectorAll('.moshi button')
const xuanxiang = document.querySelectorAll('.xuanxiang button')
const chengji = document.querySelector('.chengji')
const span = document.querySelector('.chengji span')
const textTime = document.querySelector('.textTime')
//选择模式 练习还是考试
moshi.addEventListener('click', function (e) {
  if (e.target.tagName === 'BUTTON') {
    let i = +e.target.dataset.id
    //练习模式
    if (i === 1) {
      moshi_btn[0].style.display = 'none'
      moshi_btn[1].style.display = 'none'
      day[0].style.display = 'block'
      day[1].style.display = 'block'
      day[2].style.display = 'block'
      day[3].style.display = 'block'
      day[4].style.display = 'block'
      day[5].style.display = 'block'
    }
    //考试模式
    if (i === 2) {
      moshi_btn[0].style.display = 'none'
      moshi_btn[1].style.display = 'none'
      title.style.display = 'none'
      xuanxiang[0].style.display = 'block'
      xuanxiang[1].style.display = 'block'
      xuanxiang[2].style.display = 'block'
      xuanxiang[3].style.display = 'block'
      chengji.style.display = 'block'
      textTime.style.display = 'block'
    }
  }
})



//练习模式 选择天数
for (let i = 0; i < day.length; i++) {
  day[i].addEventListener('click', function () {
    for (let i = 0; i < btn.length; i++) {
      btn[i].style.display = 'block'
    }
    day[0].style.display = 'none'
    day[1].style.display = 'none'
    day[2].style.display = 'none'
    day[3].style.display = 'none'
    day[4].style.display = 'none'
    day[5].style.display = 'none'
    title.style.display = 'none'
    //13+8+11+7+14+5
    //第一天
    if (i === 0) {
      let Xarr = []
      let Yarr = []
      //1-13题  i是0-12
      for (let i = 0; i < 13; i++) {
        Xarr.push(arr[i])
        Yarr.push(daan[i])
      }
      while (newArr.length < 13) {
        let num = Math.floor(Math.random() * Xarr.length)
        newArr.push(Xarr[num])
        newDaan.push(Yarr[num])
        Xarr.splice(num, 1)
        Yarr.splice(num, 1)
      }
    }
    //第二天
    if (i === 1) {
      let Xarr = []
      let Yarr = []
      //14-21题，i是13-20
      for (let i = 13; i < 21; i++) {
        Xarr.push(arr[i])
        Yarr.push(daan[i])
      }
      while (newArr.length < 8) {
        let num = Math.floor(Math.random() * Xarr.length)
        newArr.push(Xarr[num])
        newDaan.push(Yarr[num])
        Xarr.splice(num, 1)
        Yarr.splice(num, 1)
      }
    }
    //第三天
    if (i === 2) {
      let Xarr = []
      let Yarr = []
      //22-32题 i是21-31
      for (let i = 21; i < 32; i++) {
        Xarr.push(arr[i])
        Yarr.push(daan[i])
      }
      while (newArr.length < 11) {
        let num = Math.floor(Math.random() * Xarr.length)
        newArr.push(Xarr[num])
        newDaan.push(Yarr[num])
        Xarr.splice(num, 1)
        Yarr.splice(num, 1)
      }
    }
    //第四天
    if (i === 3) {
      let Xarr = []
      let Yarr = []
      //day04 7道题
      for (let i = 32; i < 39; i++) {
        Xarr.push(arr[i])
        Yarr.push(daan[i])
      }
      while (newArr.length < 7) {
        let num = Math.floor(Math.random() * Xarr.length)
        newArr.push(Xarr[num])
        newDaan.push(Yarr[num])
        Xarr.splice(num, 1)
        Yarr.splice(num, 1)
      }
    }
    //第五天和第六天
    if (i === 4) {
      let Xarr = []
      let Yarr = []
      //day05+06 19道题
      for (let i = 39; i < 59; i++) {
        Xarr.push(arr[i])
        Yarr.push(daan[i])
      }
      while (newArr.length < 20) {
        let num = Math.floor(Math.random() * Xarr.length)
        newArr.push(Xarr[num])
        newDaan.push(Yarr[num])
        Xarr.splice(num, 1)
        Yarr.splice(num, 1)
      }
    }
    //所有题目
    if (i === 5) {
      while (newArr.length < 60) {
        let num = Math.floor(Math.random() * arr.length)
        newArr.push(arr[num])
        newDaan.push(daan[num])
        arr.splice(num, 1)
        daan.splice(num, 1)
      }
    }
  })
}

//练习模式按键设置
const box = document.querySelector('.box')
let i = 0
btn[0].addEventListener('click', function () {
  let j = 0
  box.innerHTML = `${newArr[i]}`
  btn[1].addEventListener('click', function () {
    if (j === 0) {
      box.innerHTML = `${newDaan[i - 1]}`
      btn[1].innerHTML = '回到题目'
      j = 1
    } else {
      box.innerHTML = `${newArr[i - 1]}`
      btn[1].innerHTML = '查看答案'
      j = 0
    }
  })
  i++
})
btn[2].addEventListener('click', function () {
  i--
  box.innerHTML = `${newArr[i - 1]}`
})


//考试模式题库，去掉多选题
const arr02 = [`1. 可以说出什么是webapi ？（） <br>
A. webapi 是 一套 操作网页内容(DOM) 的 对象<br>
B. webapi 是 一套 操作网页内容(DOM) 的 函数<br>
C. webapi 是一套 操作网页内容(DOM) 与 浏览器窗口(BOM) 的对象<br>
D.webapi 是一套 操作网页内容(DOM) 与 浏览器窗口(BOM) 的函数<br>
`,
  `3.如果我想获取第一个类名为box的元素，该使用哪一个方法？（）<br>
A. document.querySelector('box')<br>
B. document.querySelectorAll('box')<br>
C. document.querySelector('.box')<br>
D. document.querySelectorAll('.box')`,
  `4.如果我想获取所有类名为box的元素，该使用哪一个方法？（）<br>
A. document.querySelector('box')<br>
B. document.querySelectorAll('box')<br>
C. document.querySelector('.box')<br>
D. document.querySelectorAll('.box')`,

  `6.关于innerText与innerHTML的区别，下列说法错误的是? （）<br>
A. innerText只能获取元素文本，无法获取标签<br>
B. innerHTML可以获取文本 + 标签<br>
C. innerText在获取文本的时候，包含子元素的文本<br>
D. innerText与innerHTML在设置的时候，作用一致。都可以解析文本中的标签样式`,
  `7.关于元素HTML常用属性操作，下列说法错误的是? （）<br>
A. 元素HTML属性指的是HTML标签本身的属性，比如 title ， alt等等<br>
B. 修改img标签的图片语法是: 元素.src = '图片路径'<br>
C. 修改a标签的链接语法是: 元素.href = '链接'<br>
D. 获取元素的类名语法是： 元素.class`,
  `8.关于元素css属性操作，下列说法错误的是？（）<br>
A. 我们可以通过style属性来修改常见样式<br>
B. 我们可以通过类名来修改常见样式，格式是： 元素.class<br>
C. 我们可以使用classList 来增加删除类名， 比如 add()等等<br>
D. classList的优点是可以不影响原先类名`,
  `12.关于自定义属性说法错误的是？（）<br>
A. 在html5中推出来了专门的data-自定义属性<br>
B. 在标签上一律以data-开头， 比如 data-id=“10”<br>
C. 在DOM对象上一律以dataset对象方式获取<br>
D. 自定义属性以后使用较少`,
  `1. 关于js中的事件，下列说法错误的是？（）<br>
A： 元素不能注册同名事件,比如给同一个按钮同时注册2个点击事件<br>
B： 事件注册之后，比如点击，鼠标经过等事件，不会立即触发<br>
C： 页面中DOM元素是都可以注册事件的<br>
D： 事件既可以通过用户交互来触发，也可以使用代码主动触发,比如 btn.click()`,
  `3.关于事件对象解释错误的是？（）<br>
A. 事件对象也是个对象，这个对象里有事件触发时的相关信息<br>
B. 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息<br>
C. 在事件绑定的回调函数的第一个参数就是事件对象，一般命名为 event、ev或者e<br>
D. 鼠标触发的事件包含事件对象，其余的比如键盘事件是没有事件对象的`,
  `4.关于环境对象this，下列说法错误的是? （）<br>
A. this是js中的一个环境对象，一般用于函数中<br>
B. 在事件处理函数中，this指向事件源dom对象，简单说指向函数调用者<br>
C. 只要是事件处理函数，就必须要使用this，否则无法实现功能<br>
D. this相当于中文的我， 谁调用，我就是谁`,
  `6.事件源一般是以什么形式存在的?（）<br>
A： 字符串<br>
B： DOM对象<br>
C： 伪数组<br>
D： 数组`,
  `7. 通过以下哪个属性可以获取到键盘事件点击的键盘码（）<br>
A： event.keyboard<br>
B： event.keyboardNumber<br>
C： event.key<br>
D： 以上属性都行`,
  `
*8.以下注册事件的说法，正确的是（）<br>
A： 可以使用on+事件名称给一元素的同一个事件注册多个事件处理函数<br>
B： addEventListener方法可以给一个元素注册多个相同事件，并且都能执行<br>
C： addEventListener第一个参数是事件名，注意需要加"on"<br>
D： addEventListener方法没有兼容性问题`,
  `1.以下关于事件对象，说法错误的是：（）<br>
A. 事件对象在事件监听回调函数的第一个参数<br>
B. 事件对象一般用于获取鼠标坐标信息与键盘按键信息<br>
C. 事件对象不可以自己命名，必须严格遵循规则来写，比如 必须是event<br>
D. 事件对象不仅有属性，还有方法`,
  `2. 以下关于事件委托，说法错误的是? （）<br>
A. 事件委托指的是 给父元素注册事件，委托给子元素来处理<br>
B. 事件委托一般用于解决 ： 给动态新增的元素注册事件<br>
C. 事件委托可以减少页面注册事件的次数,事件委托其实是利用事件冒泡的特点<br>
D. 事件委托中的this与e.target指向同一个对象，它们可以随意互换`,
  `3. 以下关于事件流，说法错误的是? （）<br>
A. 事件流三个阶段是：事件捕获、事件目标、事件冒泡<br>
B. 默认情况下，我们一般注册的事件都是冒泡事件<br>
C. addEventListener 可以捕获和冒泡，而 btn.onclick= funciton(){} 只有冒泡<br>
D. 事件流是浏览器默认现象，我们无法阻止`,
  `4.关于js中的事件冒泡与事件捕获，下列说法正确的是？（）<br>
A： 捕获类型事件，只能使用addEventListener注册，传统注册方法只能是事件冒泡<br>
B： 事件对象的stopPropagation方法只能阻止冒泡，不能阻止捕获<br>
C： 事件冒泡是浏览器的默认行为，我们无法阻止<br>
D： 如果想要阻止事件的冒泡行为，可以使用事件对象的preventDefault()方法`,
  `5.在 JavaScript 中，用于阻止默认事件的默认操作的方法是? （）<br>
A： stopDeafault()<br>
B： stopPropagation()<br>
C： preventPropagation()<br>
D： preventDefault()`,
  `6.在 JavaScript 中，用于阻止事件冒泡的操作的方法是? （）<br>
A： stopDeafault()<br>
B： stopPropagation()<br>
C： preventPropagation()<br>
D： preventDefault()`,
  `7.事件委托中，可以获得真正触发事件的元素的是? （）<br>
A： 事件对象.target. tagName<br>
B： target. tagName<br>
C： 事件对象.target. name<br>
D： 事件对象.tagName`,
  `9.下面是页面加载事件的是?（）<br>
A： scroll<br>
B： load<br>
C： resize<br>
D： target`,
  `10.下面是页面滚动事件的是?（）<br>
A： scroll<br>
B： load<br>
C： resize<br>
D： target`,
  `11.下面是页面尺寸发生变化触发的事件是?（）<br>
A： scroll<br>
B： load<br>
C： resize<br>
D： target`,
  `1.以下关于查询节点语法，错误的是：（）<br>
A. 元素.parentNode 是获取父元素<br>
B. 元素.previousElementSibling 是获取上一个元素<br>
C. 元素.nextElementSibling 是获取下一个元素<br>
D. 元素.childNodes 是获取所有子元素`,
  `2.以下关于新增节点，错误的是：（）<br>
A. document.createElement() 创建的是空标签<br>
B. 元素.appendChild(子元素) 会将子元素添加到最后面<br>
C. 元素.insertBefore(A元素,B元素) 是将A元素新增到B元素前面<br>
D. document.createElement() 会将元素添加到DOM树并渲染`,
  `4. 在JavaScript，可以使用Date对象的哪个方法返回一个月中的某一天（）<br>
A. getDate()<br>
B. getYear()<br>
C. getMonth()<br>
D.getTime()`,
  `1. 关于定时器，下列说法错误的是?（）<br>
A. 延时函数 setTimeout() 只会执行一次<br>
B. 间歇函数 setInterval() 会重复执行，必须要手动清除<br>
C. 无论是哪一种定时器，只要开启就会立即执行<br>
D. clearInterval() 清除定时器必须要传参，参数是定时器的id`,
  `2.关于window对象描述，错误的是?（）<br>
A. window对象的成员，使用时可以省略window<br>
B. window.document === document ,结果是true<br>
C. window.a = 10 , 这行代码相当于添加了一个全局变量a<br>
D. window 里面 load 事件，会在DOM树加载完成后执行`,
  `3.关于bom对象，下列说法错误的是?（）<br>
A. location.href = ‘url’ 可以实现页面跳转功能<br>
B. location.search 获取地址中携带的参数，符号 ？后面部分<br>
C. location.hash 属性获取地址中的哈希值，符号 # 后面部分<br>
D. history.go(1) 和 history.back() 功能一致`,
  `4. 关于localStorage与sessionStorage，下列说法错误的是? （）<br>
A. 可以存储任意类型的数据<br>
B. 他们的作用相同，但是存储方式不同，因此应用场景也不同<br>
C. localStorage 的数据可以长期保留,关闭浏览器也不会消失<br>
D. sessionStorage是临时存储，页面被关闭时，存储在 sessionStorage 的数据会被清除`,
  `5. localStorage 存储语法是什么？ （）<br>
A. localStorage.setItem(key,value)<br>
B. localStorage.getItem(key)<br>
C. localStorage.removeItem(key)<br>
D. localStorage.addItem(key)`,
  `6.localStorage 获取语法是什么？ （）<br>
A. localStorage.setItem(key,value)<br>
B. localStorage.getItem(key)<br>
C. localStorage.removeItem(key)<br>
D. localStorage.addItem(key)`,
  `7. localStorage 删除语法是什么？ （）<br>
A. localStorage.setItem(key,value)<br>
B. localStorage.getItem(key)<br>
C. localStorage.removeItem(key)<br>
D. localStorage.addItem(key)`,
  `8. localStorage 只能存储什么类型的数据？（）<br>
A. 任意类型<br>
B. 字符串<br>
C. 复杂数据类型<br>
D. 对象`,
  `9.localStorage 存储复杂数据类型应该先转换为什么类型存储？（）<br>
A. 字符串<br>
B. 任意类型<br>
C. 复杂数据类型<br>
D. 对象`,
  `10. localStorage 存储的时候使用那个方法可以存储为JSON字符串？（）<br>
A. JSON.stringify(复杂数据类型)<br>
B. JSON.parse(复杂数据类型)<br>
C. '复杂数据类型'<br>
D. 数组.join('')`,
  `11. localStorage 直接获取的复杂数据类型得到的是什么？()<br>
A. JSON字符串<br>
B. 对象<br>
C. 数组<br>
D. 任意类型`,
  `12. localStorage 获取复杂数据类型如何转换为对象格式？（）<br>
A. JSON.stringify(JSON字符串)<br>
B. JSON.parse(JSON字符串)<br>
C. '复杂数据类型'<br>
D. 数组.join('')`,
  `2.下面声明正则表达式正确的是? （）<br>
A. const 变量名 = |表达式|<br>
B. const 变量名 = /表达式/<br>
C. const 变量名 = 表达式<br>
D. const 变量名 = '表达式'`,
  `3.下面哪个方法可以用于检测正则表达式与指定的字符串是否匹? （）<br>
A. text()<br>
B. has()<br>
C. test()<br>
D. exce()`,
  `5.关于正则表达式声明6位数字的邮编，以下代码正确的是？（）<br>
A： const reg = /\d6/<br>
B： const reg = \d{6}\<br>
C： const reg = /\d{6}/<br>
D： const reg = /d6/`,
`福利题.班里长得最帅的人是谁 ？<br>
A： <br>
B： 逍哥<br>
C： <br>
D： ,
`]
const daan02 = ['C', 'C', 'D', 'D', 'D', 'B', 'D',
  'A', 'D', 'C', 'B', 'C', 'B',
  `C`, 'D', 'D', 'A', 'D', 'B', 'A', 'B', 'A', 'C',
  'D', 'D', 'A',
  'C', 'D', 'D', 'A', 'A', 'B', 'C', 'B', 'A', 'A', 'A', 'B',
  'B', 'C', 'C','B']
//答案的下标
const shuzi = [2, 2, 3, 3, 3, 1, 3,
  0, 3, 2, 1, 2, 1,
  2, 3, 3, 0, 3, 1, 0, 1, 0, 2,
  3, 3, 0,
  2, 3, 3, 0, 0, 1, 2, 1, 0, 0, 0, 1,
  1, 2, 2,1
]
/* console.log(arr02.length)
console.log(daan02.length) */
const xarr = []
const yarr = []
const zarr = []
const chakan = document.querySelector('.chakan button')
moshi_btn[1].addEventListener('click', function () {
  //在题库中随机抽取20道题目
  console.log(arr02.length)
  while (xarr.length < 20) {
    let num = Math.floor(Math.random() * arr02.length)
    // 1,4,8,9,10,12,14,17,28
    xarr.push(arr02[num])
    yarr.push(daan02[num])
    zarr.push(shuzi[num])
    arr02.splice(num, 1)
    daan02.splice(num, 1)
    shuzi.splice(num, 1)
    console.log(num)
  }
  // console.log(xarr)
  //点击考试模式按键，题目出现
  let xNum = 0
  box.innerHTML = `${xarr[xNum]}`
  //时间倒计时 时间结束的时候考试结束
  const min = document.querySelector('.textTime .min')
  const sec = document.querySelector('.textTime .sec')
  let secX = 0
  let minX = 10
  let timer01 = setInterval(function () {
    secX--
    if(secX >= 10){
      sec.innerHTML = `${secX}`
    }
    if (secX >= 0 && secX < 10){
      sec.innerHTML = `0${secX}`
    }
    if(minX >=0 && minX < 2){
      min.style.color = 'red'
      sec.style.color = 'red'
    }
    if(minX === 0 && secX === 0){
      clearInterval(timer01)
      xuanxiang[0].style.display = 'none'
          xuanxiang[1].style.display = 'none'
          xuanxiang[2].style.display = 'none'
          xuanxiang[3].style.display = 'none'
          chengji.style.display = 'none'
          box.style.display = 'none'
          chakan.style.display = 'block'
          chakan.addEventListener('click', function () {
            //点击查看答案，显示成绩和盒子边框
            box.style.display = 'block'
            box.innerHTML = `你的成绩是${chengjiNum * 5}分`
            chakan.style.display = 'none'
          })
    }
    min.innerHTML = `${minX}`  
    if (secX <= 0) {
      secX = 60
      minX--
    }
  }, 1000)

  //考试模式设置
/*   console.log(xarr[xNum])
  console.log(yarr[xNum])
  console.log(zarr[xNum]) */
  let chengjiNum = 0
  for (let i = 0; i < xuanxiang.length; i++) {
    //给选项按键设置属性，选择正确显示绿色，错误显示红色
    xuanxiang[i].addEventListener('click', function () {
      if (i === zarr[xNum]) {
        box.style.border = '10px solid green'
        xuanxiang[i].style.color = 'green'
        chengjiNum++
        span.innerHTML = `${chengjiNum}`
        span.style.color = 'green'
      } else {
        box.style.border = '10px solid red'
        xuanxiang[i].style.color = 'red'
      }
      let num = 1
      //设置时间函数，让颜色显示一秒钟之后，自动跳转至下一题
      let timer = setInterval(function () {
        num++
        if (xNum <= 18) {
          xNum++
        } else {
          //题目做完之后，让元素都消失，显示出查看答案按键
          xuanxiang[0].style.display = 'none'
          xuanxiang[1].style.display = 'none'
          xuanxiang[2].style.display = 'none'
          xuanxiang[3].style.display = 'none'
          chengji.style.display = 'none'
          box.style.display = 'none'
          chakan.style.display = 'block'
          chakan.addEventListener('click', function () {
            //点击查看答案，显示成绩和盒子边框
            box.style.display = 'block'
            box.innerHTML = `你的成绩是${chengjiNum * 5}分`
            chakan.style.display = 'none'
          })
        }
        box.innerHTML = `${xarr[xNum]}`
        box.style.border = '10px solid black'
        xuanxiang[i].style.color = 'black'
        if (num === 2) {
          clearInterval(timer)
        }
      }, 700)
    })
  }
  // console.log(xNum)
})
